<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
    "
  >
    <div class="left">
      <div class="dd">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose1"
        >
          <el-menu-item index="1" @click="getsbDevList">
            <span slot="title">大水表</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title">泵房</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">小水表</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title">压力计</span>
          </el-menu-item>
          <el-menu-item index="5" @click="getllDevList">
            <span slot="title">流量表</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="right">
      <div class="dd" v-if="pageInfo.dType == '3'">
        <div class="btnList">
          <div class="searchDiv">
            <el-input
              v-model="pageInfo.search"
              placeholder="请输入内容"
            ></el-input>
            <el-button @click="search" :disabled="pageInfo.search"
              >查询</el-button
            >
          </div>
          <el-button @click="addData">新增数据</el-button>
          <el-button @click="deleteData">删除数据</el-button>
          <el-button @click="editData">修改数据</el-button>
          <el-button @click="daochu">导出</el-button>
        </div>
        <div>
          <el-table
            ref="multipleTable"
            :data="devList.data.records"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @select="select"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column prop="dname" label="设备名称" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="dmaxFlow" label="瞬时水量/m³">
            </el-table-column>
            <el-table-column
              prop="dmaxFlow"
              label="最大流量 Q4"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="doftenFlow"
              label="常用流量 Q3"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="ddnMm" label="公称直径 DN" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dminFlow" label="最小流量 Q1" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="dpressureLossLevel"
              label="压力损失等级 "
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="aName" label="所属片区" show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <MyPagenation
            :currentChange="handleCurrentChange"
            :sizeChange="handleSizeChange"
            :currentPageSync="pageInfo.page"
            :pageSize="pageInfo.size"
            :total="devList.data.total"
          ></MyPagenation>
        </div>
      </div>
      <div class="dd" v-if="pageInfo.dType == '1,2'">
        <div class="btnList">
          <div class="searchDiv">
            <el-input
              v-model="pageInfo.search"
              placeholder="请输入内容"
            ></el-input>
            <el-button @click="search" :disabled="pageInfo.search"
              >查询</el-button
            >
          </div>
          <el-button @click="addData">新增数据</el-button>
          <el-button @click="deleteData">删除数据</el-button>
          <el-button @click="editData">修改数据</el-button>
          <el-button @click="daochu">导出</el-button>
        </div>
        <div>
          <el-table
            ref="multipleTable"
            :data="devList.data.records"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @select="select"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column prop="dname" label="设备名称" show-overflow-tooltip> </el-table-column>
            <el-table-column prop="dratedPressure" label="额定压力">
            </el-table-column>
            <el-table-column prop="doutputSignal" label="输出信号">
            </el-table-column>
            <el-table-column
              prop="dprecision"
              label="精度"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="dconverterHousing"
              label="转换器壳体"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="delectricalInterface" label="电器接口" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dcalibre" label="口径" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="dpowerSupply"
              label="供电电源 "
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="aname" label="所属片区" show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <MyPagenation
            :currentChange="handleCurrentChange"
            :sizeChange="handleSizeChange"
            :currentPageSync="pageInfo.page"
            :pageSize="pageInfo.size"
            :total="devList.data.total"
          ></MyPagenation>
        </div>
      </div>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog
      title='新增数据'
      :visible.sync="addDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="testForm"
        label-width="80px"
        label-position="top"
      >
        <el-form-item label="设备名称">
          <el-input v-model="testForm.dDnMm"></el-input>
        </el-form-item>
        <el-form-item label="瞬时水量/m³">
          <el-input v-model="testForm.dMaxFlow"></el-input>
        </el-form-item>
        <el-form-item label="最大流量 Q4">
          <el-input v-model="testForm.dMaxFlow"></el-input>
        </el-form-item>
        <el-form-item label="常用流量 Q3">
          <el-input v-model="testForm.dOftenFlow"></el-input>
        </el-form-item>
        <el-form-item label="工称直径 DN">
          <el-input v-model="testForm.dDnMm"></el-input>
        </el-form-item>
        <el-form-item label="最小流量 Q1">
          <el-input v-model="testForm.dMinFlow"></el-input>
        </el-form-item>
        <el-form-item label="压力损失等级">
          <el-input v-model="testForm.dPressureLossLevel"></el-input>
        </el-form-item>
        <el-form-item label="所属片区">
          <el-input v-model="testForm.aName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subUserInfo('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {insertDevInfo,updataDevinfo,delDevInfo} from '@/api/gisManage/device'
import { mapActions, mapState } from "vuex";
export default {
  name: "DenManage",
  data() {
    return {
      roleIdList:[],
      value1: "",
      value2: "",
      pageInfo: {
        page: 1,
        size: 10,
        dType:'3',
        search: "",
      },
      list: [
        {
          denName: "asd",
          momentWater: "123",
          rName: "asd",
          rTel: "12345678991",
          rSex: "男",
          accountstate: "0",
          country: "China",
          flag: "",
        },
      ],
      form: {
        uName: "",
        uAccountName: "",
        uSex: "",
        uBirthday: "",
        uTelephone: "",
        uEmail: "",
        uAddress: "",
      },
      testForm: {
        // id:'',
        aName:"test",
        dname:"test",
        isType: "test",
        createdBy: "test",
        createdTime: "test",
        updatedBy: "test",
        updatedTime: "test",
        dName: "test",
        dType: "test",
        dCode: "test",
        dIp: "test",
        dImsi: "test",
        dProtocol: "test",
        dProductid: "test",
        dRemarks: "test",
        dCoordinate: "test",
        dPlpelineid: "test",
        dArea: "test",
        // dCalibre: "test",
        // dPrecision: "test",
        // dElectrodeType: "test",
        // dStructureType: "test",
        // dRatedPressure: "test",
        // dElectrode: "test",
        // dLining: "test",
        // dMeasurCatheter: "test",
        // dFlangesSurfaces: "test",
        // dConverterHousing: "test",
        // dPowerSupply: "test",
        // dOutputSignal: "test",
        // dElectricalInterface: "test",
        // dProtectionGrade: "test",
        // dEnvTemperature: "test",
        // dStoTemperature: "test",
        // dHumidity: "test",
        // dBallMaterial: "test",
        // dTableHeader: "test",
        dDnMm: "test",
        dMaxFlow: "test",
        dOftenFlow: "test",
        dBoundaryFlow: "test",
        dMinFlow: "test",
        dPressureLossLevel: "test",
        dSort: "test",
        dLocation: "test",
        dExplain: "test",
        dWellId: "test",
        dUserName: "test",
      },
      rules: {
        uName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 12, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        uAccountName: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        uTelephone: [
          {
            required: true,
            message: "请填写电话",
            trigger: "change",
          },
        ],
      },
      addDialogVisible: false,
    };
  },
  methods: {
    ...mapActions("gismanage", ["actionGetDevList"]),
    addData() {
      this.addDialogVisible = true;
    },
    deleteData() {},
    editData() {
      if (!this.roleIdList.length) {
        this.$message.error("请选择一个要修改的角色");
      } else {
        this.addDialogVisible = true;
      }
    },
    daochu() {},
    // 页面页码变化
    handleCurrentChange(val) {
      console.log(val);
      this.pageInfo.page = val;
      this.actionGetDevList(this.pageInfo);
    },
    // 页面大小变化
    handleSizeChange(val) {
      this.pageInfo.size = val;
      this.actionGetDevList(this.pageInfo);
    },
    // 新增或修稿数据
    subUserInfo(){
      this.addDialogVisible = false
      if(!this.testForm.id){
        insertDevInfo(this.testForm)
        console.log('新增')
      }else{
        console.log('修改')
        updataDevinfo(this.testForm)
      }
    },
    // 点击选项框
    select(selection, row) {
      this.roleIdList = [];
      selection.forEach((item) => {
        this.roleIdList.push(item.id);
      });
      this.form = row;
      console.log(this.roleIdList);
    },
    // 关闭对话框
    handleClose() {
      this.addDialogVisible = false;
      this.toggleSelection();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        // 清空resoIdList，form
        this.roleIdList = [];
        this.form = {
          rdescription: "",
          rkey: "",
          rname: "",
        };
      }
    },
    getllDevList(){
      this.pageInfo.dType='1,2'
      this.actionGetDevList(this.pageInfo);
    },
    getsbDevList(){
      this.pageInfo.dType='3'
      this.actionGetDevList(this.pageInfo);
    }
  },
  computed: {
    ...mapState("gismanage", ["devList"]),
  },
  mounted() {
    this.actionGetDevList(this.pageInfo);
  },
};
</script>

<style scoped lang="less">
@import "../../../assets/style/table.less";
.left {
  width: 13%;
  height: 100%;
  .el-menu {
    width: 100%;
    background-color: transparent;
    font-size: 20px;
  }
}
.right {
  width: 86%;
  height: 100%;
}

::v-deep .el-dialog {
  width: 50% !important;
  margin-top: 10vh !important;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    .el-form-item {
      width: 45%;
      .el-select {
        width: 100%;
        height: 40px;
      }
      .el-input__inner {
        width: 100%;
        height: 40px;
      }
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
      }
    }
  }
  .el-dialog__footer {
    text-align: center;
    .el-button {
      width: 160px;
      height: 50px;
      background-color: #00e7e7;
    }
  }
}
</style>